import React, { useEffect } from 'react';
import { RightOutlined } from '#/utils/antdIcons.js';
import { lines } from '../index.js';
import styles from './index.less';

export default ({ value, onChange, onArrow, data }) => {
  const inModal = !onArrow;
  const [dataList, setDataList] = React.useState([
    { label: '外送电量', unit: '(亿千瓦时)', value: 0 },
    { label: '采购均价', unit: '(元/MWh)', value: 0 },
    { label: '送出均价', unit: '(元/MWh)', value: 0 },
    { label: '外送占比', unit: '(%)', value: 0 },
  ]);

  React.useEffect(() => {
    setValues(value);
  }, [value, JSON.stringify(data)]);

  const fmtNum = (v, n = 0) => {
    if (!v) return 0;
    return v.toFixed(n);
  };

  const clickItem = (item) => {
    if (item.name === value) return;
    onChange(item.name);
    setValues(item.name);
  };

  const setValues = (v) => {
    const itemData = data?.find((x) => x.outTransLineName === v);
    dataList[0].value = fmtNum(itemData?.outwardDeliveryQuantity, 2);
    dataList[1].value = fmtNum(itemData?.procureAvgPrice, 2);
    dataList[2].value = fmtNum(itemData?.sendOutAvgPrice, 2);
    dataList[3].value = fmtNum(itemData?.outwardDeliveryRate * 100, 1);
    setDataList([...dataList]);
  };

  return (
    <div className={styles.line_box} style={{ borderWidth: inModal ? 0 : 1 }}>
      {!inModal && (
        <div className={styles.line_box__head}>
          <div>外送线路</div>
          <div className={styles.arrow} onClick={() => onArrow()}>
            <RightOutlined className={styles.btn_icon} />
          </div>
        </div>
      )}
      <div className={styles.btns}>
        {lines.map((item) => (
          <div
            key={item.name}
            className={`${styles.btn} ${item.name === value ? styles.act : ''}`}
            onClick={() => clickItem(item)}
          >
            {item.name}
          </div>
        ))}
      </div>
      <div className={styles.list}>
        {dataList.map((item) => (
          <div className={styles.list_item} key={item.label}>
            <div className={styles.list_item__head}>
              <div>
                <div className={styles.label}>{item.label}</div>
                <div className={styles.unit}>{item.unit}</div>
              </div>
            </div>
            <div className={styles.value}>{item.value}</div>
          </div>
        ))}
      </div>
    </div>
  );
};
